<template>
  <layout :showBg="false">
    <template #header>
      <pageHead title="实名认证" />
    </template>
    <view class="content">
      <view class="tip t-center fs-28"
        >认证信息将用于提现，请确保为本人信息</view
      >
      <view class="form">
        <view class="title flex flex-a-c">
          <image src="../../../assets/images/icons/auth.png"></image>
          <text class="deep-dark bold fs-36">请认证您的身份信息</text>
        </view>
        <view class="item">
          <text class="fs-36 deep-dark bold">真实姓名</text>
          <input
            v-model="name"
            placeholder="请输入真实姓名"
            type="text"
            class="input"
          />
        </view>
        <view class="item">
          <text class="fs-36 deep-dark bold">身份证号码</text>
          <input
            v-model="id"
            placeholder="请输入身份证号码"
            type="idcard"
            class="input"
            maxlength="18"
          />
        </view>
      </view>
      <view class="comfirm">
        <view class="active-btn btn" @click="onGetSign">确认信息并认证</view>
      </view>
      <u-modal :show="show" @close="show = false" title="认证协议" :closeOnClickOverlay="true" @confirm="onSaveAuth">
        <view class="service-box">
          <iframe
            :webview-styles="webviewStyles"
            :src="src"
            class="web-view"
            frameborder="0"
            style="width:100%;height: 100%;"
          ></iframe>
        </view>
      </u-modal>
    </view>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import { saveAuth, getAuth, getSign } from "../../../api/auth";
export default {
  components: {
    layout,
    pageHead,
  },
  data() {
    return {
      name: "",
      id: "",
      show: false,
      webviewStyles: {
        width:300,
        height:300,
        progress: {
          color: "#FF3333",
        },
      },
      src:'https://thirdparty.yunzhanghu.com/app/signing-assistant-tob/51d513bd-18c1-44ce-9745-fc2382e2df39'
    };
  },
  onShow() {
    getAuth().then((res) => {
      console.log(res);
      if (res?.data?.id) {
        this.name = res.data?.name;
        this.id = res.data?.identityNo;
      }
    });
  },
  methods: {
    onGetSign() {
      getSign().then((res) => {
        console.log(res);
        this.src=res.data.url
        this.show = true
      });
    },

    onSaveAuth() {
      saveAuth({
        name: this.name,
        identityNo: this.id,
      }).then((res) => {
        console.log(res);
        uni.showToast({
          title: "操作成功",
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      }).catch(()=>{
        this.show = false
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.content {
  background: #f7f8ff;
  min-height: 100%;
  padding: 32rpx;
  position: relative;
  .tip {
    background: #fff4f1;
    color: #f36343;
    padding: 4rpx 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .form {
    margin-top: 80rpx;
    padding: 48rpx;
    background: #fff;
    border-radius: 16rpx;
    .title {
      padding-bottom: 54rpx;
      image {
        width: 52rpx;
        height: 52rpx;
        margin-right: 22rpx;
      }
    }
    .item {
      margin-top: 28rpx;
      .input {
        border-bottom: 1px solid #f2f2f2;
        padding: 18rpx 0;
        font-size: 32rpx;
        display: block;
        height: 88rpx;
      }
    }
  }
  .comfirm {
    position: fixed;
    bottom: 0;
    padding: 24rpx 48rpx;
    background: #fff;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 2rpx solid #e9e9ea;
    .btn {
      height: 88rpx;
    }
  }
}
.web-view{
  width: 600rpx;
  max-height: 90vh;
}
.service-box{
  width: 100%;
  min-height: 800rpx;
  position: relative;
  .web-view{
    position: absolute;
    left: 0;
    top:0;
  }
  .btn{
    position: absolute;
    left: 0;
    top:0;
  }
}
</style>
